.look {
  height: 1200px;
  background-color: #fff;

  .take_info {
    margin-top: 3em;
    text-align: center;
    margin-bottom: 4em;
    font-size: 1.1em;
  }

  .filter {
    margin-top: 2em;

    .filter_title {
      height: 3em;

      .ftitle:nth-of-type(1) {
        font-size: 1.5em;
        font-family: "OSBold";
      }

      .ftitle:nth-of-type(2) {

        div {
          text-align: right;

          label {
            font-family: "OSLight";
            font-size: 1.2em;
            border-right: 1px solid #666;
            padding: 0 10px;
            cursor: pointer;
          }
  
          label:last-child {
            border-right: none;
          }
  
          input {
            display: none;
          }
  
          input:checked+label {
            font-family: "OSBold";
          }
        }

        #fstitle {
          display: none;
        }

      }
    }

    .filter_list {
      .items {
        text-align: center;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        margin-top: 30px;
        height: 237px;

        img {
          width: 100%;
        }

        .info {
          position: absolute;
          left: 0;
          top: 100%;
          width: 100%;
          height: 100%;
          background-color: transparent;
          transition: all .1s;
          padding: 0 15px;

          .info_box {
            display: inline-block;
            background-color: #222;
            width: 100%;
            height: 100%;
            overflow: hidden;
            

            h4 {
              color: #eee;
              margin-bottom: 5px;
              margin-top: 3.5em;
            }

            p {
              color: #ccc;
              font-size: 1em;
            }

            a {
              display: block;
              width: 40px;
              height: 40px;
              margin: 0 auto;
              margin-top: .7em;
              border-radius: 50%;
              font-size: 40px;
              text-align: center;
              line-height: 38px;
              border: 2px solid #fcac45;
              color: #fcac45;
              font-family: "OSLight";
              text-decoration: none;
            }
          }

        }

        &:hover {
          .info {
            top: 0;
          }
        } 
      }
    }
  }

}

@media screen and (min-width:768px) {
  .look {
    height: 2200px;
    .filter {
      .filter_title {
        .ftitle:nth-of-type(2) {
          div {
            label {
              font-size: 1em;
              padding: 0 6px;
            }
          }
        }
      }
    }

  }
}

@media screen and (min-width:992px) {
  .look {
    height: 1200px;
    .filter {


      .filter_list {
        .items {
          height: 191px;
          .info {
            .info_box {
              h4 {
                margin-top: 2em;
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (min-width: 1200px) {
  .look {
    .filter {
      .filter_list {
        .items {
          .info {
            .info_box {
              h4 {
                margin-top: 2em;
              }
            }
          }
        }
      }
    }
  }
}




@media screen and (max-width:768px) {
  .look {
    height: 1550px;
    
    .take_info {
      font-size: 1em;
      height: 4em;
      overflow: auto;
      margin-bottom: 5em;
    }

    .filter {
      .filter_title {
        .ftitle:nth-of-type(1) {
          font-size: 1.2em;
        }

        .ftitle:nth-of-type(2) {
          div {
            display: none;
          }

          #fstitle {
            width: 100%;
            display: inline-block;
          }
        }
      }

      .filter_list {
        height: 1000px;
        overflow: scroll;


      }
    }


  }
}

@media screen and (max-width:600px){
  .look{
    height: 1350px;
    .filter{
      .filter_title {
        margin-bottom: 20px;
        .ftitle:nth-of-type(1) {
          font-size: 1.1em;
        }
      }

      .filter_list{
        .items {
          height: 130px;
          margin-top: 10px;

          img {
            height: 100%;
          }

          .info {
            .info_box {
              h4 {
                margin-top: 1em;
                font-size: 16px;
              }
              p {
                font-size: 12px;
              }

              a {
                margin-top: .3em;
              }
            }
          }
        }
      } 
    } 
  } 
}


